<style scoped lang="less">
  .concat-us{
    position: fixed;
    bottom: 150px;
    right: 0px;
    width: 100px;
    z-index: 5;
    z-index: 1000;
    letter-spacing: 1px;
    text-align: center;
    .concat-way{
      text-align: center;
      font-size: 18px;
      li{
        padding-top: 20px;
        background: #fff;
      }
      li>div{
        cursor: pointer;
      }
    }
    .concat-tel{
      position: absolute;
      left: -320px;
      font-size: 18px;
      top: 260px;
      color: #1189FF;
      span{
        display: inline-block;
        padding-left: 10px;
        transform: translateY(-10px);
        letter-spacing: 1px;
      }
    }
    .cha{
      position: absolute;
      right: 0px;
      cursor: pointer;
      top: 110px;
    }
  }
</style>
<template>
  <div>
    <div class="centerHome">
      <keep-alive>
        <router-view @discoverConcat="showConcat = true"  @coverConcat="showConcat = false"></router-view>
      </keep-alive>
    </div>
    <div v-show="showConcat" class="concat-us">
      <div @click="showConcat = false" class="cha">
        <img src="../static/image/sy_16.png">
      </div>
      <div style="padding-bottom: 20px">
        <img class="way-pic" src="../static/image/qiche.png">
      </div>
      <div class="concat-way">
        <ul>
          <li>
            <div>
              <p>
                <img src="../static/image/sy_18.png" alt="">
              </p>
              <p>
                客服资讯
              </p>
            </div>
          </li>
          <li>
            <div @click="showTel = !showTel">
              <p>
                <img src="../static/image/sy_22.png" alt="">
              </p>
              <p>
                电话咨询
              </p>
            </div>
          </li>
        </ul>
      </div>
      <div v-show="showTel" class="concat-tel">
        <img style="width: 100px" src="../static/image/qiche(1).png">
        <span>
          客服：{{ tel }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
  import store from './store/index.js'
  export default {
    name: 'hello',
    store,
    components: {
    },
    data () {
      return {
        showConcat: true,
        showTel: false,
        tel: ''
      }
    },
    created: function () {
      let that = this
      that.$chaos.ajax({
        url: '/Index/getServiceTelData',
        callback: function (type, res) {
          if (type === 'success') {
            that.tel = res.result.tel
          }
        }
      })
    },
    methods: {
    }
  }
</script>

<style lang="less">
  @import '~vux/src/styles/reset.less';
  @import '~vux/src/styles/1px.less';
  *{
    font-family: Arial,'微软雅黑';;
  }
  .centerHome{
    min-height:800px;
  }
  .bottom_c_2{
    font-size: 16px;
  }
  .top_kl>ul>li{
    cursor: pointer;
  }
  .top_klj>div>span{
    font-size: 18px;
  }
  .topc_right>span{
    font-size: 16px;
    cursor: pointer;
  }
  .top_kl>ul>li:hover{color: #e4e4e4;}
</style>
